<template>
  <view>
    <view class="cu-bar tabbar bg-white">
      <block v-for="(item, index) in list" :key="index">
        <view
          v-if="index != 2"
          class="action"
          :class="[currentPath == item.path ? 'text-green' : 'text-gray']"
          @tap.stop.prevent="switchTab(item.path)"
        >
          <view :class="[item.icon]">
            <view v-if="item.badge" class="cu-tag badge">{{ item.badge }}</view>
          </view>
          {{ item.text }}
        </view>
        <view
          v-else
          class="action text-gray add-action"
          @tap.stop.prevent="switchTab(item.path)"
        >
          <button class="cu-btn cuIcon-add bg-green shadow"></button>
          {{ item.text }}
        </view>
      </block>
    </view>
  </view>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  computed,
  reactive,
  toRefs,
  getCurrentInstance,
} from "vue";
import { onShow, onReady } from "@dcloudio/uni-app";
import { useStore } from "@/store";
export default defineComponent({
  setup() {    
    let pages = getCurrentPages();
    const currentPath = ref<string | undefined>("");
    // 获取当前路由
    currentPath.value = '/'+pages[pages.length - 1].route
    const list = reactive<Array<any>>([
      {
        path: "/pages/index/index",
        text: "首页",
        icon: "cuIcon-homefill",
      },
      {
        path: "/pages/sort/index",
        text: "分类",
        icon: "cuIcon-similar",
      },
      {
        path: "/pages/publish/index",
        text: "发布",
        icon: "",
      },
      {
        path: "/pages/cart/index",
        text: "购物车",
        icon: "cuIcon-cart",
        badge: 99,
      },
      {
        path: "/pages/mine/index",
        text: "我的",
        icon: "cuIcon-my",
        badge: "",
      },
    ]);
    const switchTab = (path: string = "/pages/index/index") => {
      uni.switchTab({
        url: path,
      });
    };
    return {
      switchTab,
      currentPath,
      list,
    };
  },
});
</script>
<style lang="scss" scoped>
.cu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 200rpx;
  width: 100%;
  .cu-btn {
      animation: motion 1.5s ease infinite alternate;
  }
  @keyframes motion {
      0% {
          transform: scale(1);
          transform: translateY(0);
      }
      100% {
          transform: scale(0.5);
          transform: translateY(-30%);
      }
  }
}
</style>